<template>
	<view class="wrap">
		<view class="message" v-if="list.length">
			<view class="message_cell" v-for="(item,index) in list" :key="index">
				<view class="cell_icon">
					<image :src="item.icon" mode="aspectFill"></image>
				</view>
				<view class="cell_info">
					<view class="info_tit dflex">
						<view class="tit hiddenText">
							{{item.title}}
						</view>
						<view class="time">
							{{item.time}}
						</view>
					</view>
					<view class="info_lit dflex">
						<view class="lit hiddenText">
							{{item.message || '暂无消息'}}
						</view>
						<view class="count dflex" v-if="item.count">
							{{item.count}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{
						icon:'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/171567647521849.png',
						title:'系统消息',
						message:'暂无消息',
						count:0,
						time:''
					},
					{
						icon:'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1715673235528967.png',
						title:'学员报名',
						message:'周小布报名了你发布的招学员通告',
						count:1,
						time:'2024-01-01'
					},
					{
						icon:'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1715676612318300.png',
						title:'私教报名',
						message:'杨艳丽报名了你发布的找私教通告',
						count:0,
						time:'2024-01-01'
					},
					{
						icon:'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1715676505420299.png',
						title:'一起挥报名',
						message:'张三报名了你发布的一起挥通告',
						count:0,
						time:'2024-01-01'
					},
					{
						icon:'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17156766425661233.png',
						title:'极速联系',
						message:'杨艳丽向你发起了极速联系',
						count:0,
						time:'2024-01-01'
					},
				]
			};
		}
	}
</script>

<style lang="scss">
image{
	width: 100%;
	height: 100%;
}
.dflex{
	display: flex;
	align-items: center;
}
.wrap{
	.message{
		padding: 32rpx 24rpx;
		.message_cell{
			display: flex;
			margin-bottom: 24rpx;
			.cell_icon{
				width: 96rpx;
				height: 96rpx;
			}
			.cell_info{
				flex: 1;
				margin-left: 24rpx;
				padding-bottom: 32rpx;
				border-bottom: 2rpx solid #E4E4E4;
				.info_tit{
					justify-content: space-between;
					margin-bottom: 8rpx;
					.tit{
						flex:0.95;
						font-weight: bold;
						font-size: 32rpx;
						color: #333333;
					}
					.time{
						font-size: 24rpx;
						color: #999999;
					}
					
				}
				.info_lit{
					justify-content: space-between;
					.lit{
						flex:0.95;
						font-size: 28rpx;
						color: #999999;
					}
					.count{
						width: 36rpx;
						height: 36rpx;
						justify-content: center;
						border-radius: 50%;
						background-color: #FC201C;
						font-size: 24rpx;
						color: #FFFFFF;
					}
				}
			}
		}
	}
}
</style>
